<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
</head>

<body>
    <div class="x-body">

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
        <!-- 按分类统计帖子 -->
        <div id="cate" style="width: 100%;height:700px;"></div>


    </div>
</body>

</html>
<script src="/assets/admin/js/echarts.min.js"></script>
<script>
    //获取数据
    var catelist = `{$catelist}`
    //将json转为 JS 数组
    catelist = JSON.parse(catelist);

    //已结
    var acceptList = `{$AcceptList}`
    acceptList = JSON.parse(acceptList);

    //未结
    var notAcceptList = `{$NotAcceptList}`
    notAcceptList = JSON.parse(notAcceptList);

    //基于准备好的dom，初始化echarts实例
    var chartDom = echarts.init(document.getElementById('cate'));

    // 指定图表的配置项和数据
    var option = {
        //标题
        title: {
            text: '按分类统计帖子'
        },
        //提示框组件
        tooltip: {
            trigger: 'axis', //触发类型
            axisPointer: {
                type: 'shadow' //设置显示为阴影
            }
        },
        // 图例单元组件
        legend: {},
        //设置网格
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true //自动设置坐标轴位置
        },
        // X轴  数值
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        // Y轴 分类名字
        yAxis: {
            type: 'category',
            data: catelist
        },
        series: [
            {
                name: '已采纳',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#f47920'
                    }
                },
                data: acceptList
            },
            {
                name: '未采纳',
                type: 'bar',
                data: notAcceptList,
                itemStyle: {
                    normal: {
                        color: '#bed742'
                    }
                }
            }
        ]
    }

    chartDom.setOption(option)

</script>